'use client'

import { Button } from '@/components/ui/button'
import { UserCircleIcon, ClapperboardIcon } from 'lucide-react'
import React from 'react'
import { SignedIn, SignedOut, SignInButton, UserButton } from '@clerk/nextjs'

export default function AuthButton() {
    return (
        <>
            <SignedOut>
                <SignInButton mode='modal'>
                    <Button variant="outline" className='px-4 py-2 text-sm font-medium  text-blue-600 hover:text-blue-500 border-blue-500/2 rounded-full shadow-none [&_svg]:size-5'>
                        <UserCircleIcon />
                        Sign In
                    </Button>
                </SignInButton>
            </SignedOut>
            <SignedIn>
                <UserButton>
                    <UserButton.MenuItems>
                        <UserButton.Link label='Studio' labelIcon={<ClapperboardIcon className='size-4' />} href='/studio' />
                    </UserButton.MenuItems>
                </UserButton>
            </SignedIn>
        </>
    )
}
